import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:verse_systems/commom/models/bank_model.dart';
import 'package:verse_systems/pages/authentication/authentication_control.dart';
import 'package:verse_systems/res/colors.dart';
import 'package:verse_systems/utils/image_utils.dart';
import 'package:verse_systems/widgets/drawer_appbar.dart';
import 'package:verse_systems/widgets/sp_button.dart';

class AuthenticationBank extends StatefulWidget {
  const AuthenticationBank({super.key});

  @override
  State<AuthenticationBank> createState() => _AuthenticationBankState();
}

class _AuthenticationBankState extends State<AuthenticationBank> {
  final control = Get.find<AuthenticationControl>();
  final state = Get.find<AuthenticationControl>().state;

  @override
  void initState() {
    super.initState();
    control.getBankCardInfo();
  }

  @override
  void dispose() {
    super.dispose();
    state.country = "";
    state.banks = [];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colours.system_background_color,
      appBar:  DrawerAppbar(
        title: 'bank_infor'.tr,
      ),
      body: GetBuilder<AuthenticationControl>(
          init: control,
          builder: (_) {
            return GestureDetector(
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      _information,
                      _bank,
                      _next,
                    ],
                  ),
                ));
          }),
    );
  }

  Widget get _bank {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 12.w, 0, 0),
      child: Wrap(
        spacing: 15.w,
        runSpacing: 25.w,
        children: _card,
      ),
    );
  }

  List<Widget> get _card {
    return state.banks.map((BankModel model) {
      return InkWell(
          onTap: () {},
          child: Container(
            width: 164.w,
            height: 142.w,
            color: Colours.app_main_color,
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.fromLTRB(0, 22.w, 0, 13.w),
                  child:  Image.asset(
                  ImageUtils.getImgPath(model.key.toString()),
                  fit: BoxFit.fill,
                  width: 40.w,
                  height: 39.w,
                )),
                Text(
                  model.value.toString(),
                  style: TextStyle(
                      color: Colours.app_bank_text_color,
                      fontSize: 12.sp,
                     ),
                ),
                 Checkbox(
                    value: model.check,
                    activeColor: Colours.app_main_background_color,
                    checkColor: Colours.app_main_color,
                    hoverColor: Colours.app_main_background_color,
                    shape: const CircleBorder(),
                    onChanged: (v) {
                     control.onBankChanged(model: model);

                    })
              ],
            ),
          ));
    }).toList();
  }

  Widget get _next {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 300.w, 0, 35.w),
      width: 310.w,
      child: SPButton(
        minHeight: 50.w,
        fontSize: 13.sp,
        text: "next".tr,
        textColor: Colours.app_main_color,
        backgroundColor: Colours.app_main_background_color,
        radius: 25.w,
        onPressed: control.handleBankNext,
      ),
    );
  }

 
  Widget get _information {
    return Container(
        width: MediaQuery.of(context).size.width,
        color: Colours.app_main_color,
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 24.w),
            Row(
              children: [
                Image.asset(
                  ImageUtils.getImgPath("banks"),
                  fit: BoxFit.fill,
                  width: 38.w,
                  height: 30.w,
                ),
                Text(
                 'bank_infor'.tr,
                  style: TextStyle(
                      color: Colours.app_black_text_color,
                      fontSize: 24.sp,
                      fontWeight: FontWeight.w600),
                ),
              ],
            ),
            Container(
                margin: EdgeInsets.fromLTRB(0, 14.w, 0, 12.w),
                child: Text(
                  state.bank_notice,
                  style: TextStyle(
                    color: Colours.app_text_color,
                    fontSize: 12.sp,
                  ),
                )),
          ],
        ));
  }
}
